import { Button, message, Upload, Modal } from 'antd';
import React, { useState } from 'react';

import { UploadOutlined } from '@ant-design/icons';
import { baseURL } from 'utils/request';
import { getToken } from 'utils/storage';
/*
  学习目标：上传组件的基本使用(将上传文件组件更改为受控组件)===通过fileList相当于value，onChange，相当于事件，通过useState保存值，使得页面会更新状态
  步骤：
     1. 
     2. 
*/
// 设置图片上传的白名单
const whiteListUrl = ['image/jpg', 'image/png', 'image/jpeg'];
export default function Test() {
  const [imgurl, setImgurl] = useState('');
  //   保存上传文件后的文件信息
  const [filelist, setFilelist] = useState([]);
  const props = {
    //   自定义用户上传图片的文件选取弹窗，该显示哪些文件类型
    accept: ['.jpeg,.jpg,.png'],
    //   保存上传文件的键名
    name: 'image',
    // 上传文件的服务器
    action: baseURL + '/v1_0/upload',
    headers: {
      authorization: `Bearer ${getToken()}`
    },
    onChange(info) {
      // 将上柴你的文件全部保存到filelist数组中
      setFilelist(info.fileList);
      //   上传文件后的回调函数
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传文件成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传文件失败`);
      }
    },
    // 设置上传成功的回调函数
    onPreview: file => {
      console.log(33, file);
      setImgurl(file.thumbUrl);
    },
    // 上传之前的回调函数
    beforeUpload(file) {
      console.log('上传之前的回调file  ----->  ', file);
      if (!whiteListUrl.includes(file.type)) {
        //   提示用户
        message.warning('不能上传该类型的文件');
        // 两种方式阻止上传文件
        // 1，return false  不推荐使用 图片/文件会显示在页面上，但是没有上传成功
        // 2， Upload.LIST_IGNORE  ，推荐使用，图片/文件不会会显示在页面上，但是没有上传成功
        return Upload.LIST_IGNORE;
      }
    }
  };
  return (
    <div>
      <Upload
        {...props} // 1.调整上传文件列表的显示类型，card类型
        listType="picture-card"
        fileList={filelist}
      >
        {filelist.length < 3 && <Button icon={<UploadOutlined />}>Click to Upload</Button>}
      </Upload>
      <Modal
        visible={!!imgurl}
        footer={null}
        style={{ width: 470, textAlign: 'center' }}
        onCancel={() => {
          setImgurl('');
        }}
      >
        <img src={imgurl} alt="" />
      </Modal>
    </div>
  );
}
